<template>
  <div>
    <header class="header">
      <div class="title">
        <img src="../../../assets/images/01_11.png" alt="" class="img_zuo" @click="clickBack" />
        <div>巡查排查</div>
        <div class="btn-add">
<!--          <img src="../../../assets/images/addnew.png"/>-->
        </div>
      </div>
    </header>
    <div class="menPhis-main titles">
      <van-list
        class="van-pull-refresh"
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        @load="onLoads">
        <div @click="jumpDetail(item)" class="box_list" v-for="(item, index) in searchList" :key="index">
          <img class="img_logo5" src="../../../assets/images/logo5.png" />
          <div class="center">
            <div style="width: 70%;">
              <div class="small_title">[{{item.jgconfigname}}]{{item.title}}</div>
              <div class="introduce">
                <div class="intro_name">
                  <div v-if="item.yhlb === 100 || item.yhlb === 102">
                    <img
                      style="width: 13px"
                      :src="item.isRectifica === 1 || item.isRectifica === 3 || item.isRectifica === 6 ? isRectificas : isRectifica" />
                  </div>
                  <div v-else>
                    <div v-if="item.hasOwnProperty('isRectifica')">
                      <img v-if="item.isRectifica !== -1" style="width: 13px" :src="isRectificas">
                    </div>
                    <div v-else>
                      <img v-if="(item.yhlb === 1 || item.yhlb === 2 || item.yhlb === 99) && item.status !== 0"
                           style="width: 13px"
                           :src="isRectificas">
                      <div v-else>
                        <img v-if="item.yhlb === 1 || item.yhlb === 2 || item.yhlb === 99"
                             style="width: 13px"
                             :src="isRectifica">
                      </div>
                    </div>
                  </div>
                  <img src="../../../assets/images/people.png" />
                  <div>{{item.userName}}</div>
                </div>
              </div>
            </div>
            <div class="data">
              {{ (new Date(item.addtime).getMonth() + 1) < 10 ? `0${new Date(item.addtime).getMonth() + 1}` : new Date(item.addtime).getMonth() + 1 }}-
              {{ (new Date(item.addtime).getDate() + 1) < 10 ? `0${new Date(item.addtime).getDate()}` : new Date(item.addtime).getDate()}}
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isRectifica: require('../../../assets/images/jsd.gif'),
      isRectificas: require('../../../assets/images/lg.png'),
      routerData: {},
      routerDatas: {},
      searchList: [],
      pageInfo: {
        page: 1,
        pageSize: 20
      },
      loading: false,
      finished: false,
      refreshing: false,
      total: 1,
      finishedText: '',
      userId: 0
    }
  },
  beforeRouteLeave(to, from, next) {
    //设置路由的 meta
    if(!(to.path === '/hard_detail' || to.path === '/ptlook')){
      localStorage.removeItem("list_scrollTop");
    }
    next();
  },
  //进入该页面时，用之前保存的滚动位置赋值
  beforeRouteEnter (to, from, next) {
    next(vm => {
      let scrollTop = localStorage.getItem("list_scrollTop")?JSON.parse(localStorage.getItem("list_scrollTop")):null;
      if(scrollTop || scrollTop === 0){
        $('.menPhis-main').animate({ scrollTop: scrollTop }, 0);
      }else{
        vm.userId = Number(localStorage.getItem("userId"));
        vm.routerData = JSON.parse(sessionStorage.getItem('time'));
        vm.routerDatas = JSON.parse(sessionStorage.getItem('patrol'));
        vm.show = false;
        vm.total = 1;
        vm.searchList = [];
        vm.pageInfo.page = 1;
        if (vm.searchList.length === 0) {
          vm.loading = true;
          vm.finished = true;
          vm.onLoad();
        }
      }
      localStorage.removeItem("list_scrollTop");
    })
  },
  mounted() {
  },
  methods: {
    onLoads () {
      if (this.searchList.length > 0) {
        this.onLoad();
      } else {
        this.loading = false;
      }
    },
    //  分页加载
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.searchList = [];
          this.refreshing = false;
        }
        if (this.searchList.length !== this.total) {
          this.finished = false;
          this.query();
        } else {
          console.log(2222)
          if (this.total > 10) {
            this.finishedText = '没有更多啦';
          } else {
            this.finishedText = '';
          }
          this.finished = true;
        }
      }, 1000);
    },
    //  跳转详情
    jumpDetail (data) {
      // this.$router.push("/ptlook");//进入到普通的巡查排查详情

      localStorage.setItem("list_scrollTop",$('.menPhis-main').scrollTop());
      if (data.patrol_troubleshoot !== 0 && data.patrol_troubleshoot !== undefined) {
        sessionStorage.setItem("inspection_patrolTroubleshootId", data.patrol_troubleshoot);
        sessionStorage.setItem("inspection_infoId", data.patrol_troubleshoot_info_id);
        // localStorage.removeItem('domPlayString')
        this.$router.push("/hard_detail");
      } else {
        this.$router.push({
          path: '/ptlook',
          query: { id: data.id, ids: 14 }
        });
      }
    },
    //  查询数据
    query () {
      let that = this
      let params = {
        year: that.routerData.years,
        page: that.pageInfo.page,
        pageSize: that.pageInfo.pageSize
      };
      if (that.routerData.timeType !== 1) {
        params.month = that.routerData.year;
      }
      switch (that.routerData.bigClass) {
        case undefined:
          if (that.routerDatas) {
            params.userId = that.routerDatas.userId;
            params.dwId = that.routerData.dwId;
            params.operatorId = that.routerDatas.operatorId;
          }
          this.querys(params, 'peopleList');
          break;
        default:
          params.userId = that.userId;
          params.bigClass = that.routerData.bigClass;
          if (that.routerData.dwId !== undefined) {
            params.dwId = that.routerData.dwId;
          }
          if (that.routerData.type) {
            params.type = that.routerData.type;
          }
          if (that.routerData.chooseId !== 0) {
            params.type = that.routerData.chooseId;
          }
          this.querys(params, 'piechartList');
          break;
      }
    },
    querys (params, url) {
      let that = this;
      that.axios.get(`${that.$global_msg.Url.host}/partroInspection/${url}`,
        { params }).then( res => {
        if (res.data.total === 0) {
          that.$toast("暂无数据");
          that.finished = true;
          return false
        }
        that.searchList = that.searchList.concat(res.data.rows.list);
        that.total = res.data.rows.total;
        that.pageInfo.page++;
        that.loading = false;
      }).catch( e => terminal._error(e));
    },
    //  返回
    clickBack () {
      sessionStorage.removeItem('patrol');
      this.$router.back();
      // this.$router.push({
      //   path: this.routerData.path
      // })
    }
  },
  filters: {
  }
}
</script>
<style scoped>
  * {
    box-sizing: border-box;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }
  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }
  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-add {
    position: absolute;
    right: 0.37037rem;
    width: auto !important;
    height: 100%;
    bottom: 0;
    display: flex;
    align-items: center;
  }
  .btn-add img {
    width: 0.529629rem;
    height: 0.529629rem;
  }
  .menPhis-main {
    /*min-height: 100vh;*/
    padding: 1.8519rem 0.262963rem 0;
  }
  .center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.1852rem;
  }
  .img_logo5 {
    width: 0.6667rem;
    height: 0.7407rem;
    margin-right: 0.5556rem;
  }
  .introduce {
    display: flex;
    color: #8E8E8E;
    font-size: 0.3148rem;
    align-items: center;
    margin-top: 0.0926rem;
  }
  .intro_name {
    display: flex;
    align-items: center;
    /* margin-left: 0.5rem; */
  }
  .intro_name img {
    width: 0.2963rem;
    margin-right: 0.1852rem;
  }

  .intro_name div {
    font-size: 0.2963rem;
  }
  .data {
    color: #8E8E8E;
  }
  .box_list {
    display: flex;
    align-items: center;
    height: 1.3889rem;
  }
  .small_title {
    width: 5.6481rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
